<template>
	<view class="login-wapr p-lr-28">
		<view class="top-fixd flex-between">
			<image style="width: 82px;height: 24px;" src="../../static/logotext.png" mode=""></image>
			<view class="flex-center">
				<image style="width: 18px;height: 18px;" src="../../static/lang.png" mode=""></image>
				<text class="pl5 fb" @click="openPopup"> {{getLang($i18n.locale)}}</text>
			</view>
		</view>
		<view class="fs20 fb mt15">{{$t('accountLogin')}}</view>
		<view class="" style="margin-top: 50px;">
			<uni-forms :modelValue="loginForm" ref="loginformRule" label-position="top" labelWidth="auto" :rules="rules">
				<uni-forms-item :label="$t('account')" name="username">
					<uni-easyinput class="u-input" :inputBorder="false" v-model="loginForm.username" :placeholder="$t('enter')+$t('account')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item :label="$t('pwd')" name="password">
					<uni-easyinput class="u-input" :inputBorder="false" v-model="loginForm.password" type="password" :placeholder="$t('enter')+$t('pwd')"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<button :class="['btn-submit', disabled?'login-btn-disabled':'login-btn']" :disabled="disabled" @click="submitForm">{{$t('login')}}</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottom">
			<view class="flex-center highlight-color fs16">
				<navigator url="/pages/openAccount/openAccount" open-type="navigate" hover-class="other-navigator-hover">
					<text class="text-md" >{{$t('nowRet')}}</text>
				</navigator>
				<span style="margin-left: 30px;" @click="toKefu">{{$t('onLineService')}}</span>
			</view>
			<!-- <view class="flex-center mt15 text-sm">
				{{$t('loginAgree')}} 
				<navigator url="/pages/personal/yszc" open-type="navigate" hover-class="other-navigator-hover">
					<text class="highlight-color text-md pl5" >{{$t('privacy')}}</text>
				</navigator>
			</view> -->
		</view>
		<selectLang :select="select"></selectLang>
	</view>
</template>

<script setup>
	import { onMounted, ref, watch } from 'vue';
	import { getLang } from '@/utils/utils.js'
	import useGlobalProperties from '@/utils/useGlobalProperties.js'
	import selectLang from '@/components/selectLang.vue';
	import { login, getUserInfo } from '@/api/index.js';
	import { useUserStore } from '@/store/index.js'
	import config from '@/config.js';
	const userStore = useUserStore()
	const disabled = ref(true)
	const select = ref(0)
	const popup = ref(null);
	const { $t,$i18n } = useGlobalProperties()
	// console.log($t('pwd'));
	// console.log($i18n);
	const loginForm = ref({
		username: '',
		password: ''
	})
	const isLogin = ref(false)
	// 监听 loginForm 对象的变化
	watch(loginForm, (newVal, oldVal) => {
	  // console.log('loginForm changed:', newVal);
	  if(loginForm.value.username && loginForm.value.password){
		  disabled.value = false
	  }else{
		  disabled.value = true
	  }
	}, { deep: true });  // 设置 deep 为 true 以便深度监听对象的变化
	const rules = ref({
		// 对name字段进行必填验证
		username: {
			// name 字段的校验规则
			rules:[
				// 校验 name 不能为空
				{
					required: true,
					errorMessage: $t('enter')+$t('account'),
				},
				// 对name字段进行长度验证
				// {
				// 	minLength: 3,
				// 	maxLength: 5,
				// 	errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				// }
			],
			trigger:'blur'
		},
		password: { rules:[ { required: true, errorMessage: $t('enter')+$t('pwd'), }, ],trigger:'blur'}
	})
	const loginformRule = ref(null)
	const submitForm = () =>{
		loginformRule.value.validate(valid => {
			if (!valid) {
				uni.showToast({
					title: $t('logining'),
					icon: 'none'
				});
				if(isLogin.value) return;
				disabled.value = true
				login({
					account:loginForm.value.username,
					password:loginForm.value.password,
				}).then(res =>{
					disabled.value = false
					// console.log(11111111,res);
					uni.showToast({
						title: res.msg
					});
					if(res.code==1){
						isLogin.value = true
						uni.setStorageSync('H5STOCK_USERINFO',res.data.userinfo)
						getUserInfo().then(res =>{
							// console.log('用户信息',res);
							uni.setStorageSync('ISREALID',res.data.user_check_status)
							uni.setStorageSync('USERINDEX',res.data)
							userStore.setUserInfo(res.data);
							uni.switchTab({
								url:'/pages/home/home'
							})
						})
					}
				}).catch(err =>{
					disabled.value = false
				})
			}
		});
	}
	const openPopup = () => {
	  select.value++
	}
	onMounted(()=>{
		uni.hideNavigationBarLoading()
		if(uni.getStorageSync('H5STOCK_USERINFO').token) return uni.switchTab({
			url:'/pages/home/home'
		})
	})
	const toKefu = () => {
		// console.log('toKefu', params);
		// window.location.href = config.BASE_URL+ "/addons/kefu/index/mobile?token="+uni.getStorageSync('H5STOCK_USERINFO').token
		window.location.href = "https://de.to01.top/addons/kefu/index/mobile?token="+uni.getStorageSync('H5STOCK_USERINFO').token
	};
</script>

<style scoped lang="scss">
	::v-deep uni-button:after{
		border: none!important;
	}
	.login-wapr {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		font-size: 28rpx;
		background-color: #f6f7fb !important;

		.top-fixd {
			width: 100%;
			height: 100rpx;
		}

		.title {
			font-size: 24rpx;
			color: #999999;
		}
		.bottom {
			position: fixed;
			bottom: 50px;
			width: calc(100% - 56px);
		}
		
	}
	
</style>